<template>
  <div class="main">
      <Ltable :data="tableData" @setCurrentPage="setCurrentPage" @setSizePage="setSizePage">
        <template v-slot:tag_slot="scope">
          <el-tag>{{ scope.row.tag }}</el-tag>
        </template>
        <template v-slot:operate_slot="scope">
          <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="edit(scope.row)">删除</el-button>
        </template>
      </Ltable>
      <el-table
        :data="data"
        style="width: 100%">
        <el-table-column
          prop="prop"
          label="label"
          width="width">
        </el-table-column>
      </el-table>
      <hr>
      <br/>
      <h2 class="font-text"> 上山打老虎</h2>
      <h2 class="font-text">老虎</h2>
  </div>
</template>

<script>
import Ltable from '../components/table/l-table.vue'
import { echo } from 'comzen-deploy'
export default {
  components: {
    Ltable
  },
  data () {
    return {
      tableData: {
        columns: [
          {
            prop: 'date',
            label: '日期',
            width: '180',
            hide: false
          },
          {
            prop: 'name',
            label: '姓名',
            width: '180',
            hide: false
          },
          {
            prop: 'address',
            label: '地址'
          },
          {
            type: 'slot',
            slot_name: 'tag_slot',
            prop: 'tag',
            label: 'Tag'
          },
          {
            type: 'slot',
            slot_name: 'operate_slot',
            prop: 'operate',
            label: '操作'
          }
        ],
        data: [
          {
            id: 0,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            tag: '家'
          }, {
            id: 1,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            tag: '家'
          }, {
            id: 2,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            tag: '家'
          }, {
            id: 3,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: '家'
          }
        ],
        abc: '11',
        pageData: {
          pageSizes: [5, 10, 15, 20, 25, 30],
          currentPage: 1,
          total: 17
        }
      }
    }
  },
  methods: {
    edit (row) {
      console.log('row', row)
    },
    setCurrentPage (val) {
      console.log(`父组件当前页: ${val}`)
    },
    setSizePage (val) {
      console.log(`父组件每页 ${val} 条`)
    }
  },
  created () {
    echo('1222222222222222222------echo')
    const obj = [
      {
        menuId: '1',
        children: [
          {
            menuId: '2',
            children: [
              { menuId: '3', children: [] }
            ]
          }
        ]
      },
      { menuId: '4', children: [] }
    ]
    function getMenuId (obj) {
      var idsList = []
      fn(obj)
      function fn (obj) {
        for (const key of obj) {
          key.menuId && idsList.push(key.menuId)
          if (key.children.length !== 0) {
            fn(key.children)
          }
        }
      }
      return idsList
    }
    console.log(getMenuId(obj))
  }
}
</script>

<style lang="scss" scoped>
.font-text {
  font-family: "阿里妈妈方圆体 VF Regular";
}
 .main{
  width: 80%;
  display: flex;
  padding: 20px;
  // .right{
  //   width: 30%;
  //   border: 1px solid #ccc;
  //   margin-left: 20px;
  // }
 }
</style>
